<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link rel="stylesheet" href="../static/plugins/iview/styles/iview.css">
    <link rel="stylesheet" href="../static/css/base.css">
    <link rel="stylesheet" href="../static/css/widget.css">
    <link rel="stylesheet" href="../static/css/innerPage.css">

    <script src="../static/js/lodash.js"></script>

    <style>
        html,
        body {
            color: #495060;
        }
        
        #list-top-wrap {
            background-color: #f8f8f9;
            padding: 0;
            border: 1px #dddee1 solid;
        }
        
        #list-top-wrap .each {
            padding: 0px 30px;
            text-align: center;
            border-right: 1px #dddee1 solid;
            display: inline-block;
            cursor: pointer;
            height: 45px;
            line-height: 45px;
            color: #495060;
        }
        
        #list-top-wrap .each.active {
            color: #2c89eb;
        }
        
        #list-top-wrap .each .fa {
            color: #999;
        }
        
        #list-top-wrap .right_tips {
            color: #61c6d6;
            font-size: 12px;
            line-height: 45px;
            height: 45px;
            padding-right: 20px;
        }
        
        .each_detail {
            margin-top: 22px;
            margin-bottom: 20px;
        }
        
        .each_detail .header>div {
            display: inline-block;
            padding: 0px 10px;
            color: #80848f;
            font-size: 12px;
        }
        
        .each_detail .header .title {
            font-size: 16px;
            color: #1c2438;
            cursor: pointer;
            font-weight: bold;
        }
        
        .each_detail .header .title .fa {
            font-size: 18px;
            color: #E2E1E5;
        }
        
        .each_detail .subheader {
            height: 30px;
            line-height: 30px;
            padding: 10px 0px;
        }
        
        .each_detail .subheader>div {
            display: inline-block;
            padding: 0px 18px;
            font-size: 14px;
            border-right: 1px #E2E1E5 solid;
            height: 12px;
            line-height: 12px;
        }
        
        .each_detail .subheader>div:last-child {
            border-right: none;
        }
        
        .each_detail .subheader>div>span {
            color: #2d8cf0;
        }
        
        .each_detail .subheader>div:first-child {
            padding-left: 34px;
        }
        
        .each_detail .body {
            margin-top: 15px;
            line-height: 24px;
            padding-left: 34px;
        }
        
        .footer {
            margin-top: 10px;
            margin-left: 30px;
            padding-bottom: 22px;
        }
        
        .border_bottom {
            border-bottom: 1px #E2E1E5 solid;
        }
        
        .each_detail .footer .ivu-badge-count {
            background-color: white;
            color: #85cddb;
            border: 1px #85cddb solid;
            height: 24px;
            line-height: 22px;
            padding: 0px 10px;
            border-radius: 14px;
            cursor: pointer;
            font-size: 12px;
        }
        
        #list-pager-wrap {
            text-align: center;
        }
        
        .w1000 {
            width: 1000px!important;
        }
        
        .w1200 {
            width: 1200px!important;
        }
        
        #search-wrap label {
            display: inline-block;
            width: 80px;
            text-align: right;
            color: #495060;
            font-size: 12px;
        }
        
        #search-wrap .ivu-input-wrapper {
            width: 280px;
        }
    </style>

</head>

<body class="">


    <div class="sc-container w1200" id="app">

        <div id="search-wrap" class="clearfix">

            <!-- 首行 -->
            <div class="search_first_line clearfix">

                <label for="category">业务分类：</label>
                <Cascader id="category" style="display:inline-block;width:280px;" :data="searchForm.categoryArr" v-model="searchForm.subCategory" placeholder="请选择业务分类"></Cascader>

                <div class="searchKey_container" style="float:right">
                    <i-input v-model="searchForm.searchKey" placeholder="服务名称/供应商关键字"></i-input>
                    <i-button type="primary">查询</i-button>
                </div>



            </div>

            <div class="clearfix">
                <label for="category">Api方式：</label>
                <i-select v-model="searchForm.apiType" multiple style="width:280px">
                    <i-option v-for="item in searchForm.apiTypeList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                </i-select>
            </div>
        </div>

        <div id="list-top-wrap" style="border:1px #eee solid; height:45px; " class="clearfix">
            <div class="each active">默认排序</div>
            <div class="each" v-on:click.stop="togglePublicTimeSort">上架时间 <i class="fa" v-bind:class="{'fa-long-arrow-down':searchForm.publicTimeSort,'fa-long-arrow-up':!searchForm.publicTimeSort}">&nbsp;</i></div>
            <span class="fr right_tips">"全部分类",无关键字,工为您找到12条相关结果</span>
        </div>

        <div id="list-wrap">




            <div class="each_detail" v-for="cl in curPageComponentList">
                <div class="header clearfix">
                    <div class="title" v-on:click.stop="changePageUrl(cl)">
                        <i class="fa fa-cube" style="color:#33cde5"> </i> {{cl.name}}
                    </div>
                    <div class="amount fr">调用次数：{{cl.callAmout}}次</div>
                    <div class="time fr">发布时间：{{cl.publicTime}}</div>
                </div>
                <div class="subheader clearfix">
                    <div class="category fl">业务分类：<span>{{cl.categoryName}}</span></div>
                    <div class="type fl">调用方式：<span>{{cl.callType}}</span></div>
                    <div class="validate fl">有效时间：<span>{{cl.valiateStart}} ~ {{cl.valiateEnd}}</span></div>
                    <div class="supplier fl">供应商：<span>{{cl.supplierName}}</span></div>
                </div>
                <div class="body clearfix">
                    <p> {{cl.instruction}}</p>
                </div>
                <div class="footer border_bottom clearfix">
                    <Badge :count="b" style="margin-right:10px;" class-name="" v-for="b in cl.labels"></Badge>
                </div>
            </div>







        </div>


        <div id="list-pager-wrap" class="clearfix mb_20">
            <Page :total="pager.total" v-on:on-change="pageOnChange" :page-size="pager.pageSize" :current="pager.current" show-elevator show-total></Page>
        </div>




    </div>



    <script src="../static/js/jquery.js"></script>


    <script src="../static/plugins/iview/vue.min.js"></script>

    <!-- 引入样式 -->
    <!-- <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css"> -->
    <script src="../static/plugins/iview/locale/zh-CN.js"></script>

    <script src="../static/plugins/iview/iview.min.js"></script>

    <script src="../static/js/suit.js"></script>

    <script src="../static/js/ba-resize.js"></script>

    <script>
        Vue.mixin({
            methods: {
                //当前打开还是新窗口打开切换
                ChangeHasTop: function() {

                    var a = window.parent.app.changeHasTop(true);

                },
                //当前打开还是新窗口打开切换
                openUrlNewWidow: function(url) {
                    url = url || window.location.href;
                    window.open(url); //在另外新建窗口中打开窗口
                }
            }
        })


        var app = new Vue({
            el: '#app',
            data: {
                pager: {
                    current: 1,
                    pageSize: 20,
                    total: 0
                },
                componentList: [{
                    name: '滑动-Slider3',
                    publicTime: '2011-10-10 12:00:00',
                    callAmout: 100,
                    valiateStart: '2010-10-10',
                    valiateEnd: '2010-12-10',
                    category: '1',
                    categoryName: '环境监控',
                    subCategory: '11',
                    subCategoryName: '移动执法',
                    callType: 'WebService',
                    supplierName: '江苏梦兰神彩科技股份有限公司',
                    labels: ["环保", '大数据'],
                    instruction: 'COM组件有两种进程模型：进程内组件和进程外组件。由于本地进程外组件与客户运行在不同的进程空间，所以客户程序对组件对象的调用，并不是直接进行的，而是用到了操作系统支持的一些跨进程通信方法，主要有OSF（Open Software Foundation开放软件基金会，现在改为Open Group[开放小组http://www.opengroup.org/]）开发的DCE RPC（Distributed Computing Environment 分布式计算环境Remote Procedure Call 远程过程调用）和LPC（Local Procedure Calls本地过程调用）。'
                }, {
                    name: '建设项目信息',
                    publicTime: '2011-10-10 12:00:00',
                    callAmout: 100,
                    valiateStart: '2010-10-10',
                    valiateEnd: '2010-12-10',
                    category: '1',
                    categoryName: '环境监控',
                    subCategory: '11',
                    subCategoryName: '移动执法',
                    callType: 'WebService',
                    supplierName: '江苏梦兰神彩科技股份有限公司',
                    labels: ["环保", '大数据'],
                    instruction: 'COM组件有两种进程模型：进程内组件和进程外组件。由于本地进程外组件与客户运行在不同的进程空间，所以客户程序对组件对象的调用，并不是直接进行的，而是用到了操作系统支持的一些跨进程通信方法，主要有OSF（Open Software Foundation开放软件基金会，现在改为Open Group[开放小组http://www.opengroup.org/]）开发的DCE RPC（Distributed Computing Environment 分布式计算环境Remote Procedure Call 远程过程调用）和LPC（Local Procedure Calls本地过程调用）。'
                }, {
                    name: '折叠面板-Well',
                    publicTime: '2012-10-10 12:00:00',
                    callAmout: 100,
                    valiateStart: '2010-10-10',
                    valiateEnd: '2010-12-10',
                    category: '1',
                    categoryName: '环境监控',
                    subCategory: '12',
                    subCategoryName: '厦门环保',
                    callType: 'WebService',
                    supplierName: '江苏梦兰神彩科技股份有限公司',
                    labels: ["环保", '大数据'],
                    instruction: 'COM组件有两种进程模型：进程内组件和进程外组件。由于本地进程外组件与客户运行在不同的进程空间，所以客户程序对组件对象的调用，并不是直接进行的，而是用到了操作系统支持的一些跨进程通信方法，主要有OSF（Open Software Foundation开放软件基金会，现在改为Open Group[开放小组http://www.opengroup.org/]）开发的DCE RPC（Distributed Computing Environment 分布式计算环境Remote Procedure Call 远程过程调用）和LPC（Local Procedure Calls本地过程调用）。'
                }, {
                    name: '企业基本信息-BasicInfo',
                    publicTime: '2013-10-10 12:00:00',
                    callAmout: 100,
                    valiateStart: '2010-10-10',
                    valiateEnd: '2010-12-10',
                    category: '1',
                    categoryName: '环境监控',
                    subCategory: '12',
                    subCategoryName: '厦门环保',
                    callType: 'WebService',
                    supplierName: '江苏梦兰神彩科技股份有限公司',
                    labels: ["环保", '大数据'],
                    instruction: 'COM组件有两种进程模型：进程内组件和进程外组件。由于本地进程外组件与客户运行在不同的进程空间，所以客户程序对组件对象的调用，并不是直接进行的，而是用到了操作系统支持的一些跨进程通信方法，主要有OSF（Open Software Foundation开放软件基金会，现在改为Open Group[开放小组http://www.opengroup.org/]）开发的DCE RPC（Distributed Computing Environment 分布式计算环境Remote Procedure Call 远程过程调用）和LPC（Local Procedure Calls本地过程调用）。'
                }, {
                    name: '弹框组件5',
                    publicTime: '2014-10-10 12:00:00',
                    callAmout: 100,
                    valiateStart: '2010-10-10',
                    valiateEnd: '2010-12-10',
                    category: '2',
                    categoryName: '污水治理',
                    subCategory: '21',
                    subCategoryName: '污染指标',
                    callType: 'WebService',
                    supplierName: '江苏梦兰神彩科技股份有限公司',
                    labels: ["环保", '大数据'],
                    instruction: 'COM组件有两种进程模型：进程内组件和进程外组件。由于本地进程外组件与客户运行在不同的进程空间，所以客户程序对组件对象的调用，并不是直接进行的，而是用到了操作系统支持的一些跨进程通信方法，主要有OSF（Open Software Foundation开放软件基金会，现在改为Open Group[开放小组http://www.opengroup.org/]）开发的DCE RPC（Distributed Computing Environment 分布式计算环境Remote Procedure Call 远程过程调用）和LPC（Local Procedure Calls本地过程调用）。'
                }, {
                    name: '弹框组件6',
                    publicTime: '2015-10-10 12:00:00',
                    callAmout: 100,
                    valiateStart: '2010-10-10',
                    valiateEnd: '2010-12-10',
                    category: '2',
                    categoryName: '污水治理',
                    subCategory: '21',
                    subCategoryName: '污染指标',
                    callType: 'WebService',
                    supplierName: '江苏梦兰神彩科技股份有限公司',
                    labels: ["环保", '大数据'],
                    instruction: 'COM组件有两种进程模型：进程内组件和进程外组件。由于本地进程外组件与客户运行在不同的进程空间，所以客户程序对组件对象的调用，并不是直接进行的，而是用到了操作系统支持的一些跨进程通信方法，主要有OSF（Open Software Foundation开放软件基金会，现在改为Open Group[开放小组http://www.opengroup.org/]）开发的DCE RPC（Distributed Computing Environment 分布式计算环境Remote Procedure Call 远程过程调用）和LPC（Local Procedure Calls本地过程调用）。'
                }, {
                    name: '弹框组件7',
                    publicTime: '2016-10-10 12:00:00',
                    callAmout: 100,
                    valiateStart: '2010-10-10',
                    valiateEnd: '2010-12-10',
                    category: '2',
                    categoryName: '污水治理',
                    subCategory: '21',
                    subCategoryName: '污染指标',
                    callType: 'DB',
                    supplierName: '江苏梦兰神彩科技股份有限公司',
                    labels: ["环保", '大数据'],
                    instruction: 'COM组件有两种进程模型：进程内组件和进程外组件。由于本地进程外组件与客户运行在不同的进程空间，所以客户程序对组件对象的调用，并不是直接进行的，而是用到了操作系统支持的一些跨进程通信方法，主要有OSF（Open Software Foundation开放软件基金会，现在改为Open Group[开放小组http://www.opengroup.org/]）开发的DCE RPC（Distributed Computing Environment 分布式计算环境Remote Procedure Call 远程过程调用）和LPC（Local Procedure Calls本地过程调用）。'
                }, {
                    name: '弹框组件8',
                    publicTime: '2017-10-10 12:00:00',
                    callAmout: 100,
                    valiateStart: '2010-10-10',
                    valiateEnd: '2010-12-10',
                    category: '2',
                    categoryName: '污水治理',
                    subCategory: '22',
                    subCategoryName: '污染地区',
                    callType: 'DB',
                    supplierName: '江苏梦兰神彩科技股份有限公司',
                    labels: ["环保", '大数据'],
                    instruction: 'COM组件有两种进程模型：进程内组件和进程外组件。由于本地进程外组件与客户运行在不同的进程空间，所以客户程序对组件对象的调用，并不是直接进行的，而是用到了操作系统支持的一些跨进程通信方法，主要有OSF（Open Software Foundation开放软件基金会，现在改为Open Group[开放小组http://www.opengroup.org/]）开发的DCE RPC（Distributed Computing Environment 分布式计算环境Remote Procedure Call 远程过程调用）和LPC（Local Procedure Calls本地过程调用）。'
                }, {
                    name: '弹框组件9',
                    publicTime: '2018-10-10 12:00:00',
                    callAmout: 100,
                    valiateStart: '2010-10-10',
                    valiateEnd: '2010-12-10',
                    category: '2',
                    categoryName: '污水治理',
                    subCategory: '21',
                    subCategoryName: '污染指标',
                    callType: 'WebService',
                    supplierName: '江苏梦兰神彩科技股份有限公司',
                    labels: ["环保", '大数据'],
                    instruction: 'COM组件有两种进程模型：进程内组件和进程外组件。由于本地进程外组件与客户运行在不同的进程空间，所以客户程序对组件对象的调用，并不是直接进行的，而是用到了操作系统支持的一些跨进程通信方法，主要有OSF（Open Software Foundation开放软件基金会，现在改为Open Group[开放小组http://www.opengroup.org/]）开发的DCE RPC（Distributed Computing Environment 分布式计算环境Remote Procedure Call 远程过程调用）和LPC（Local Procedure Calls本地过程调用）。'
                }, {
                    name: '弹框组件10',
                    publicTime: '2018-10-10 12:00:00',
                    callAmout: 100,
                    valiateStart: '2010-10-10',
                    valiateEnd: '2010-12-10',
                    category: '2',
                    categoryName: '污水治理',
                    subCategory: '21',
                    subCategoryName: '污染指标',
                    callType: 'DB',
                    supplierName: '江苏梦兰神彩科技股份有限公司',
                    labels: ["环保", '大数据'],
                    instruction: 'COM组件有两种进程模型：进程内组件和进程外组件。由于本地进程外组件与客户运行在不同的进程空间，所以客户程序对组件对象的调用，并不是直接进行的，而是用到了操作系统支持的一些跨进程通信方法，主要有OSF（Open Software Foundation开放软件基金会，现在改为Open Group[开放小组http://www.opengroup.org/]）开发的DCE RPC（Distributed Computing Environment 分布式计算环境Remote Procedure Call 远程过程调用）和LPC（Local Procedure Calls本地过程调用）。'
                }, {
                    name: '弹框组件11',
                    publicTime: '2020-10-10 12:00:00',
                    callAmout: 100,
                    valiateStart: '2010-10-10',
                    valiateEnd: '2010-12-10',
                    category: '2',
                    categoryName: '污水治理',
                    subCategory: '22',
                    subCategoryName: '污染地区',
                    callType: 'DB',
                    supplierName: '江苏梦兰神彩科技股份有限公司',
                    labels: ["环保", '大数据'],
                    instruction: 'COM组件有两种进程模型：进程内组件和进程外组件。由于本地进程外组件与客户运行在不同的进程空间，所以客户程序对组件对象的调用，并不是直接进行的，而是用到了操作系统支持的一些跨进程通信方法，主要有OSF（Open Software Foundation开放软件基金会，现在改为Open Group[开放小组http://www.opengroup.org/]）开发的DCE RPC（Distributed Computing Environment 分布式计算环境Remote Procedure Call 远程过程调用）和LPC（Local Procedure Calls本地过程调用）。'
                }],
                searchForm: {
                    subCategory: [],
                    categoryArr: [{
                        value: '1',
                        label: '环境监控',
                        children: [{
                            value: '11',
                            label: '移动执法'
                        }, {
                            value: '12',
                            label: '厦门环保'
                        }]
                    }, {
                        value: '2',
                        label: '污水治理',
                        children: [{
                            value: '21',
                            label: '污染指标'
                        }, {
                            value: '22',
                            label: '污染地区'

                        }],
                    }],
                    apiTypeList: [{
                        value: 'DB',
                        label: 'DB'
                    }, {
                        value: 'WebService',
                        label: 'WebService'
                    }],
                    apiType: [],
                    searchBodyShow: false,
                    searchKey: '',
                    publicTimeSort: false
                },

            },
            mounted: function() {

            },
            computed: {
                curPageComponentList: function() {
                    var subCategory = this.searchForm.subCategory.pop() || "";
                    var apiType = this.searchForm.apiType;
                    var searchKey = this.searchForm.searchKey;
                    var publicTimeSortStr = this.searchForm.publicTimeSort ? 'asc' : 'desc';

                    var me = this;
                    var arr = _.filter(this.componentList, function(item) {
                        return (subCategory == "" || item.subCategory == subCategory) &&
                            (apiType.length == 0 || apiType.indexOf(item.callType) > -1) &&
                            (searchKey.length == 0 || item.supplierName.indexOf(searchKey) > -1 || item.name.indexOf(searchKey) > -1);

                    });
                    me.pager.total = arr.length;

                    arr = _.sortBy(arr, ['publicTime'], [publicTimeSortStr]);
                    return arr.slice(me.pager.pageSize * (me.pager.current - 1) + 1, me.pager.pageSize);
                }
            },
            methods: {
                changePageUrl: function(cl) {
                    var a = window.parent.app.changePageUrl({
                        url: '../innerPage/detail.html?id=1001',
                        menuName: cl.name + "--详情",
                        menuPath: ["组件详情"]
                    });

                },
                pageOnChange: function(val) {
                    console.log(val);
                    this.pager.current = val;
                },
                togglePublicTimeSort: function() {
                    this.searchForm.publicTimeSort = !this.searchForm.publicTimeSort;
                },

                searchBodyShowToggle: function(toVal) {
                    if (toVal == undefined) {
                        this.searchBodyShow = !this.searchBodyShow;
                    } else {
                        this.searchBodyShow = toVal;
                    }

                },
                formLeftIconLine: function() {
                    $(".form-wrap-width-leftIcon .line").animate({
                        opacity: 0.5
                    });

                    setInterval(function() {
                        $(".form-wrap-width-leftIcon .line").animate({
                            opacity: 1
                        });
                    }, 200);
                    $(".form-wrap-width-leftIcon .form-right").resize(function() {
                        var rightWrap = $(".form-wrap-width-leftIcon .form-right").height();
                        var rightWrapLastChild = $(".form-wrap-width-leftIcon .form-right .widget:last-child").height();
                        $(".form-wrap-width-leftIcon .line,.form-wrap-width-leftIcon.form-right").css({
                            height: rightWrap - rightWrapLastChild - 36 + "px"
                        });
                    });
                    $(".form-wrap-width-leftIcon .form-right").trigger('resize');
                }
            }

        });
    </script>

</body>

</html>